<template>
  <div class="infinite-container cancel-order">
    <div class="content-box">
      <div class="content-title">
        <div>订单详情</div>
      </div>
    </div>
    <div>
      <div class>
        <common-list title="就诊人" :desc="currentOrder.ask.personName"></common-list>
        <common-list title="科室医生" :desc="currentOrder.ask.doctorName"></common-list>
        <common-list title="科室名称" :desc="currentOrder.ask.departmentName"></common-list>
        <common-list title="就诊日期时间">
          <div class="confirm-message">{{currentOrder.ask.createTime}}</div>
        </common-list>
      </div>
    </div>

    <div class="cancel-order-bottom mt10 content-box bgwhite">
      <div class="content-title">
        <div>取消预约原因</div>
      </div>
      <div class="pd10">
        <mu-flexbox class="mt10" v-for="(r, i) in CANCEL_ORDER_RESIONS" :key="i">
          <mu-flexbox-item :grow="4" @click.native="radioResion=r">{{r}}</mu-flexbox-item>
          <mu-flexbox-item :grow="1" class="text-right">
            <mu-radio name="group" :nativeValue="r" v-model="radioResion" />
          </mu-flexbox-item>
        </mu-flexbox>
      </div>
      <div class="login pd20">
        <mu-raised-button
          label="取消预约"
          fullWidth
          primary
          class="submit-btn"
          @click="cancelDialog=true"
        ></mu-raised-button>
      </div>
    </div>

    <mu-dialog :open="cancelDialog">
      <div class="center">确定要取消吗？</div>
      <div class="login center mt20">
        <mu-flat-button slot="actions" @click="cancelDialog=false" label="取消" />
        <mu-flat-button slot="actions" primary @click="cancelOrder" label="确定取消" />
      </div>
    </mu-dialog>
  </div>
</template>

<script>
import { CANCEL_ORDER_RESIONS, APPOINT_SUCCESS_TIPS } from "@/api/const";
import CommonList from "@/components/CommonList";
import { commonAjaxJson, RESTFUL_API } from "@/api/api";
export default {
  mounted() {
    this.getOrderDetail();
  },
  components: { CommonList },
  data() {
    return {
      currentOrder: { ask: {} },
      CANCEL_ORDER_RESIONS,
      APPOINT_SUCCESS_TIPS,
      radioResion: "",
      cancelDialog: false
    };
  },
  methods: {
    getOrderDetail() {
      commonAjaxJson(
        RESTFUL_API.queryDetail,
        { consultId: this.$route.query.cid },
        true
      ).then(res => {
        if (res.data.code == 200) {
          this.currentOrder = res.data.data;
        } else {
          this.$store.commit("UPDATE_TOAST", {
            message: "服务器内部错误!"
          });
        }
      });
    },
    cancelOrder() {
      let param = {
        consultId: this.$route.query.cid,
        cancelReason: this.radioResion
      };
      let path = "";
      let goBackPath = "";
      let cancelSuccessText = "";
      if (this.$route.query.consultType == "returnVisit") {
        // 复诊配药取消预约
        path = "cancelDispenseOrder";
        goBackPath = "app://medicalHistory?type=1";
        cancelSuccessText = "复诊配药";
      } else {
        // 图文咨询取消预约
        path = "cancelQueryOnline";
        cancelSuccessText = "图文咨询";
        goBackPath = "app://medicalHistory?type=2";
      }
      commonAjaxJson(RESTFUL_API[path], param, true)
        .then(res => {
          if (res.data.code == 200) {
            this.$store.commit("UPDATE_TOAST", {
              message: "取消成功",
              fn: () => {
                window.location.href = goBackPath;
              }
            });
          } else {
            this.$store.commit("UPDATE_TOAST", {
              message: res.data.message
            });
          }
        })
        .catch(res => {});
    }
  }
};
</script>

<style lang="less" scoped>
.cancel-order {
  .cancel-content {
    margin: 0 10px 10px;
  }
  .cancel-order-bottom {
    .col {
      padding: 0.5em 0;
      &.col-20 {
        text-align: right;
      }
    }
  }
}
</style>
